<template>
  <div class="body">
    <div id="container"></div>
<!--    <div class="input-card" style="width: auto;">-->
<!--      <div class="input-item">-->
<!--        <button class="btn" @click="heatmap.show()">显示热力图</button>-->
<!--      </div>-->
<!--      <div class="input-item">-->
<!--        <button class="btn" @click="heatmap.hide()">关闭热力图</button>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
// https://a.amap.com/jsapi_demos/static/resource/heatmapData.js
// import { heatmapData } from './heatmapData.js'
// import { heatmapData } from './heatmapData'
// import heatmapData from './heatmapData'
import { findFocusGroupMapList } from '../../../api/eventlist'

export default {
  async mounted () {
    var userAgent = navigator.userAgent
    console.log(userAgent)
    // 延迟加载，防止出现AMap not defined
    await this.findFocusGroupMapList()
    setTimeout(() => {
      this.initMap()
      this.createHeatMap()
    }, 5000)
  },
  beforeDestroy () {
    this.map && this.map.destroy()
  },
  data () {
    return {
      map: null,
      heatmap: null,
      dataList: []
    }
  },
  methods: {
    initMap () {
      console.log(22222)
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        center: [123.412581, 41.805853],
        zoom: 10
        // mapStyle: 'amap://styles/grey' // 极夜蓝
        // 自定义地图样式：https://lbs.amap.com/dev/mapstyle/index
      })
    },
    // 判断浏览区是否支持canvas
    isSupportCanvas () {
      let elem = document.createElement('canvas')
      return !!(elem.getContext && elem.getContext('2d'))
    },
    createHeatMap () {
      if (!this.isSupportCanvas()) {
        return this.$msg.error(
          '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。'
        )
      }
      let __this = this
      this.map.plugin(['AMap.Heatmap'], function () {
        // 初始化heatmap对象
        __this.heatmap = new AMap.Heatmap(__this.map, {
          visible: false,
          radius: 25, // 给定半径
          opacity: [0, 0.8]
        })
        // 设置数据集：该数据为北京部分“公园”数据
        __this.heatmap.setDataSet({
          data: __this.dataList,
          max: 500
        })
      })
    },
    findFocusGroupMapList () {
      findFocusGroupMapList().then(ret => {
        if (ret.data.errcode === 0) {
          this.dataList = ret.data.data
          console.log(11111)
        } else {
          this.$Notice.error({
            title: '失败',
            desc: res.data.errmsg
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
//@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");

#container {
  padding: 0;
  width: 100%;
  height: 600px;
}
.body{
  margin: -15px;
}
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
</style>
